<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--? 不固定的一栏超出了屏幕宽度怎么解决? overflowx flexwrap换行-->
<style>
    .float,.flex,.position {
        width: 100%;
        height: 100px;
    }
    .float .left {
        width: 100px;
        height: 100%;
        background-color: lime;
        float: left;
    }
    .float .right {
        /*float实现方式1*/
        /*height: 100%;*/
        /*width: auto;*/
        /*margin-left: 100px;*/
        /*background-color: saddlebrown;*/
        /*float实现方式2 开启BFC不会和左边浮动元素重叠*/
        height: 100%;
        overflow: hidden;
        background-color: saddlebrown;
        /*float实现方式3 和左边重叠*/
        /*height: 100%;*/
        /*background-color: saddlebrown;*/
    }
    .flex {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .flex .left {
        width: 100px;
        height: 100%;
        background-color: silver;
    }
    .flex .right {
        flex: 1;
        height: 100%;
        background-color: #3498db;
    }
    .position {
        position: relative;
        overflow: hidden;
    }
    .position .left {
        width: 100px;
        position: absolute;
        left: 0;
        height: 100%;
        background-color: #7c83fd;
        /*设置z-index则可以不用宽度已知*/
        z-index: 1;
    }
    .position .right {
        position: absolute;
        right: -100px;
        height: 100%;
        width: 100%;
        background-color: pink;
    }
</style>
<body>
float
<div class="float">
    <div class="left"></div>
    <div class="right"></div>
</div>
flex
<div class="flex">
    <div class="left"></div>
    <div class="right"></div>
</div>
position
<div class="position">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>
